<template>
  <div id="app">
    <h2>测试题</h2>
    <div v-for="(item, index) in mathList" :key="item">
      <SubjectItem :item="item" :index="index" @res="handleRes"></SubjectItem>
    </div>
    <div>
      <FlagItem v-model="flagList" :flagList="flagList"></FlagItem>
    </div>
  </div>
</template>

<script>
import FlagItem from "./components/FlagItem.vue";
import SubjectItem from "./components/SubjectItem.vue";

export default {
  data() {
    return {
      mathNum: 5,
      mathList: [],
      flagList: [],
    };
  },
  created() {
    this.getMathList();
    this.getFlagList();
  },
  methods: {
    getMathList() {
      for (let i = 0; i < this.mathNum; i++) {
        const num1 = Math.floor(Math.random() * 10) + 1;
        const num2 = Math.floor(Math.random() * 10) + 1;
        const rightAnswer = num1 + num2;
        this.mathList.push([num1, num2, rightAnswer]);
      }
    },
    getFlagList() {
      this.flagList = Array.from({ length: this.mathNum }, () => "未完成");
    },
    handleRes(val) {
      console.log("val", val);
      const index = val.split('-')[0]
      const res = val.split('-')[1]
      // this.flagList[index] = res
      this.flagList.splice(index,1,res)
      console.log('flagList',this.flagList);
    },
  },
  components: {
    FlagItem,
    SubjectItem,
  },
};
</script>

<style>
body {
  background-color: #eee;
}

#app {
  background-color: #fff;
  width: 500px;
  margin: 50px auto;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
  padding: 2em;
}
</style>
